<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    /**
     * .说一对$nextTick 的理解,以及应用场景
     * vue中的nextTick主要用于处理数据动态变化后，DOM还未及时更新的问题，用nextTick就可以获取数据更新后最新DOM的变化
     * 跟定时器的原理差不多
     * 
     * 应用场景：当我们根据需要为某些动态页面dom元素添加事件，这就需要在dom元素渲染完毕之后在添加，
     * 但是created与mounted函数执行时一般dom并没有渲染完毕，
     * 所以就会出现获取不到，添加不了事件的问题，这回就要用到nextTick处理
     * 
     * 场景：有一个div，默认用 v-if 将它隐藏，点击一个按钮后，改变 v-if 的值，让它显示出来，同时拿到这个div的文本内容。如果v-if的值是 false，
     * 直接去获取div内容是获取不到的，因为此时div还没有被创建出来，那么应该在点击按钮后，改变v-if的值为 true，div才会被创建，此时再去获取
     * 运行后在控制台会抛出一个错误：Cannot read property 'innnerHTML of null，意思就是获取不到div元素，这就需要使用$nextTick。
     * 异步更新队列
     * 
     * es5 es6 继承(如何理解面向对象)
     * es5实现继承：
                1.原型链继承直接 子类点prototype=new 父类
                2.盗用构造函数继承使用call apply的方式实现继承 在子类里父类.call/apply 然后再外面let一个新的变量new子类
                3.组合继承结合原型链继承和盗用构造函数继承来实现组合继承
        es6实现继承：
        先用class定义一个类 用extends继承类 用super表示父类
     * es5 的面向对象是通过 new 一个构造函数实现的 es6 的面向对象是通过 class 实现的 es6 的 class 就是面向对象的语法糖
     * 说一下对$set的理解 以及应用场景
     *  当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。
     * 用法：this.$set(原数组, 索引值, 需要赋的值)
    */

    // function getChar(str){
    //     let obj={}
    //     let max={char:'',count:-1}
    //     for(let i=0;i<str.length;i++){
    //             if(obj.hasOwnProperty(str[i])){
    //                     obj[str[i]]++
    //             }else{
    //                 obj[str[i]]=1
    //             }
    //     }
    // }
    // getChar('abbcceedd')

    let clientHeight  = document.documentElement.clientHeight; //浏览器高度
let scrollHeight = document.body.scrollHeight;
let scrollTop = document.documentElement.scrollTop;
 
let distance = 50;  //距离视窗还用50的时候，开始触发；

if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
    console.log("开始加载数据");
}

</script>